<!--
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2023-12-18 15:29:43
 * @LastEditors: your name
 * @LastEditTime: 2023-12-18 15:51:16
-->
<template>
    <ul id="menu-wrapper">
      <li v-for="item in menus" class="item">
        <button id="btn-toggle">
          <router-link :to="item.path" :class="[item.isActive ? 'active-item' : '']">
            <i :class="['iconfont', item.iconName]"></i>
          </router-link>
        </button>
      </li>
    </ul>
  </template>
    
  <script setup>
  import {menus} from '@/staticData';
  </script>
  <style scoped>
  #menu-wrapper {
    max-width: 500px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0;
  }
  
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
  }
  
  .item>p {
    font-size: 12px;
  }
  
  #btn-toggle{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #53697670;
    background: linear-gradient(to bottom, rgba(0, 128, 255, 0.377), rgba(0, 128, 255, 0.281));
    transition: all .4s linear;
    pointer-events: all;
    cursor: pointer;
  }
  
  #btn-toggle:hover {
      background-color: #536976c4;
      background: linear-gradient(to bottom, rgba(0, 128, 255, 0.577), rgba(0, 128, 255, 0.581));
  }
  </style>